<template>
  <div class="box">
    <div class="income-box">
      <div class="income-header">
        <router-link class="header-btn" to="/mine/income/cash">提现</router-link>
        <div class="header-center">
          <b>200.00</b>
          <p>可用余额</p>
        </div>
        <div class="header-bottom">
          <div class="bottom-item">
            <b>100.00</b>
            <p>今日收益</p>
          </div>
          <div class="bottom-item">
            <b>100.00</b>
            <p>本月收益</p>
          </div>
          <div class="bottom-item">
            <b>200.00</b>
            <p>累计收益</p>
          </div>
        </div>
      </div>
     <div class="income-select">
      <van-dropdown-menu  active-color="#28DBC7">
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
      <div class="select-button-box" @click="showPop"><span>{{buttonText}}</span><i></i></div>
     </div>
      <div class="income-num">
        <span>累计订单数量：10</span>
        <span>累计收益：100</span>
      </div>
      <ul class="income-list">
          <li class="income-list-item" :class="{active:item.status=='已结算'}" v-for="(item,index) in incomeList" :key="index">
            <div class="img-box">
                <img :src="item.photo" alt="">
            </div>
            <div class="item-content">
                <div class="item-content-left">
                    <p class="item-content-nickname">{{item.nickname}}</p>
                    <p class="item-content-type">{{item.type}}</p>
                    <p class="item-content-time">{{item.time}}</p>
                </div>
                <div class="item-content-right">
                    <p class="item-num">+{{item.num}}</p>
                    <span>{{item.status}}</span>
                </div>
            </div>
          </li>
      </ul>
      <van-popup v-model="isShowPop" position="bottom" :style="{ height: '50%' }">
        <!-- 按月查询 -->
        <van-datetime-picker v-model="currentMonth" type="year-month" :show-toolbar="false" :max-date="maxDate" @change="monthChange" v-show="selectType=='按月查询'"/>
        <!-- 开始日期 -->
        <van-datetime-picker v-model="currentDateStart" type="date" :show-toolbar="false" :max-date="maxDate"  @change="dateStartChange" v-show="selectType=='按日查询'&&isShowStart==true"/>
        <!-- 结束日期 -->
        <van-datetime-picker v-model="currentDateEnd" type="date" :show-toolbar="false" :max-date="maxDate"  @change="dateEndChange" v-show="selectType=='按日查询'&&isShowEnd==true"/>

          <div class="btn-box">
              <span @click="doCancel">取消</span>
              <div class="select-type" @click="changeType">{{selectType}}<img src="@/assets/images/income-change.png" alt=""></div>
              <span @click="doConfirm">确定</span>
          </div>
          <div class="select-box">
            <p v-show="selectType=='按月查询'"><i>{{selectedMonth}}</i></p>
            <p v-show="selectType=='按日查询'"><span :class="{active:isShowStart==true}" @click="showStart">{{dateStart}}</span>至<span :class="{active:isShowEnd==true}" @click="showEnd">{{dateEnd}}</span></p>
          </div>
          
      </van-popup>
    </div>
  </div>
</template>

<script>
import photo from '@/assets/temporary/mine-photo.png'
export default {
  name: "Incom",
  data() {
    return {
      value1: 0,
      option1: [
        { text: "全部收益", value: 0 },
        { text: "我的分享收益", value: 1 },
        { text: "我的直属收益", value: 2 },
          { text: "全部成员收益", value: 3 }
      ],
      isShowPop:false,//是否显示日期弹窗
      buttonText:'按月',//按钮文字
      selectType:'按月查询',// 按月查询和按日查询
      maxDate: new Date(),//最大选择范围
      currentMonth:new Date(),//默认显示月份
      currentDateStart: new Date(),//默认显示开始日期
      currentDateEnd: new Date(),//默认显示结束日期
      selectedMonth: '',//弹窗中展示的选中  年月
      dateStart:'',//弹窗中展示的选中      开始日期 
      dateEnd:'',//弹窗中展示的选中        结束日期
      isShowStart:true,//显示开始日期 控件
      isShowEnd:false,//显示结束日期控件
      incomeList:[
          {photo:photo,nickname:'自由飞翔',type:'购买少林寺成人票',time:'2019-12-12  10:25:10',num:10,status:'待结算'},
          {photo:photo,nickname:'自由飞翔',type:'购买少林寺成人票',time:'2019-12-12  10:25:10',num:10,status:'已结算'},
          {photo:photo,nickname:'自由飞翔',type:'购买少林寺成人票',time:'2019-12-12  10:25:10',num:10,status:'已结算'},
          {photo:photo,nickname:'自由飞翔',type:'购买少林寺成人票',time:'2019-12-12  10:25:10',num:10,status:'待结算'},
          {photo:photo,nickname:'自由飞翔',type:'购买少林寺成人票',time:'2019-12-12  10:25:10',num:10,status:'待结算'},
          {photo:photo,nickname:'自由飞翔',type:'购买少林寺成人票',time:'2019-12-12  10:25:10',num:10,status:'已结算'},
      ]
    };
  },
    mounted(){
      this.getDate()
    },
  methods:{
    showPop(){
      this.isShowPop=true
    },
    // 切换类型
    changeType(){
      if(this.selectType=='按月查询'){
        this.selectType='按日查询'
      }else{
        this.selectType='按月查询'
      }
    },
    // 月份改变时
      monthChange(picker){
        this.selectedMonth=picker.getValues().join('.')
        window.console.log(picker.getValues().join('.'))
    },
      // 开始日期改变时
      dateStartChange(picker){
          this.dateStart=picker.getValues().join('.')
          window.console.log(picker.getValues().join('.'))
      },
      // 结束日期改变时
      dateEndChange(picker){
          this.dateEnd=picker.getValues().join('.')
          window.console.log(picker.getValues().join('.'))
      },
      // 显示开始日期控件
      showStart(){
        this.isShowEnd=false
        this.isShowStart=true
      },
      // 显示结束日期控件
      showEnd(){
          this.isShowEnd=true
          this.isShowStart=false
      },
    // 确认
    doConfirm(){
      if(this.selectType=='按月查询'){
          this.buttonText=this.selectedMonth
      }else{
          this.buttonText=this.dateStart+'\n'+this.dateEnd
      }
      this.isShowPop=false
    },
      // 取消
      doCancel(){
        this.isShowPop=false
          this.buttonText='按月'
      },
    // 日期格式化  月份默认当月  日期默认当天
    getDate(){
      let y=new Date().getFullYear()
      let m=new Date().getMonth()+1
      let d=new Date().getDate()
      this.selectedMonth=y+'.'+m
      this.dateStart=y+'.'+m+'.'+d
      this.dateEnd=y+'.'+m+'.'+d
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/public";
.income-header {
  position: relative;
  height: vw(320);
  background:linear-gradient(-90deg,rgba(7,218,196,1) 0%,rgba(10,210,142,1) 100%);
  .header-btn {
    position: absolute;
    top: vw(20);
    right: vw(30);
    width: vw(100);
    padding:vw(5) 0;
    text-align: center;
    border-radius: vw(24);
    background-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: vw(28);
    font-weight: bold;
  }
  .header-center {
    position: absolute;
    top: vw(60);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    b {
      font-size: vw(68);
      color: #fff;
    }
    p {
      font-size: vw(32);
      color: rgba(255, 255, 255, 0.5);
    }
  }
  .header-bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    width: 100%;
    bottom: vw(10);
    text-align: center;
    b {
      font-size: vw(36);
      color: #fff;
    }
    p {
      font-size: vw(28);
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
.income-select{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .select-button-box{
    width: 50%;
    text-align: center;
    font-size: vw(32);
      span{
          display: inline-block;
          vertical-align: middle;
          max-width: vw(160);
      }
    i{
      display: inline-block;
      border: vw(6) solid ;
      border-color:transparent transparent #999 #999;
      transform: rotate(-45deg);
      vertical-align: middle;
      margin:0 0 0 vw(10);
    }
  }
}
.income-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 vw(63);
  height: vw(87);
  background: $gray_bg;
  color: #999;
  font-size: vw(28);
}
.income-list{
    height: calc(100vh - 67.5vw);
    overflow-y: auto;
    .income-list-item{
        padding:vw(30);
        padding-bottom:0;
        display: flex;
        justify-content: space-between;
        &.active{
            .item-num{
                color:$org_font;
            }
        }
        .img-box{
            width: vw(60);
            height: vw(60);
            margin-right:vw(20);
            border-radius: 50%;
            overflow: hidden;
        }
        .item-content{
            flex:1;
            display: flex;
            justify-content: space-between;
            padding-bottom:vw(30);
            border-bottom: 1px solid $gray_bg;
                .item-content-left{
                    .item-content-nickname{
                    font-size: vw(32);
                }
                .item-content-type{
                    font-size: vw(28);
                    margin:vw(20) 0;
                }
                .item-content-time{
                    font-size: vw(24);
                    color: #999;
                }
                }
                .item-content-right{
                text-align: center;
                .item-num{
                    font-size: vw(42);
                    margin-bottom: vw(34);
                }
                >span{
                    color: #666;
                }
            }
        }
        
    }
}
.btn-box{
    position: absolute;
    top:vw(20);
    left:0;
    width: 100%;
    height: vw(50);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index:999;
    span{
        padding:0 vw(20);
    }
}
.select-type{
  color:#333;
  font-size: vw(28);
  img{
    display: inline-block;
    width: vw(30);
    margin-left:vw(10);
    vertical-align: middle;
  }
}
.select-box{
  position: absolute;
  top:vw(120);
  left:50%;
  transform: translateX(-50%);
  z-index:999;
  color:#999;
  font-size: vw(28);
  line-height: vw(32);
  i{
    padding:vw(5) vw(50);
    font-style: normal;
    border-bottom:1px solid $green;
    color:$green;
  }
  span{
     padding:vw(5) vw(50);
    border-bottom:1px solid #ccc;
    color:#ccc;
      &.active{
          border-bottom:1px solid $green;
          color:$green;
      }
  }
}
</style>